<template>
  <div class="comp">
    <!-- 放置图表的容器 -->
    <div class="chart" ref="ring"></div>
  </div>
</template>

<script>
// 引入混入文件模块
import mixin from "@/mixins/index.js";
export default {
    // 使用混入
    mixins:[mixin],
  mounted() {
        // 1.echarts实例初始化 静态配置项设置 基础图表绘制
        this.initEcharts();
        // 2.获取业务数据
        this.getData();
        // 3.监听窗口变化实现图表自适应
        window.addEventListener('resize',this.adapTive);
        
  },
  methods: {
    // 1.echarts实例初始化 静态配置项设置 基础图表绘制
    initEcharts() {
        // 1.1获取实例
        this.echartsInstance = this.$echarts.init(this.$refs.ring, this.themeName);
        // 1.2设置绘图需要的静态配置项
        let initOptions={
            // 标题
            title:{
                text:"▌主要地区农作物种植占比",
                top:"3%",
                left:"3%"
            },
            // 提示
            tooltip:{
                show:true
            }

            // 图表类型
            // series:[
            //     {
            //         type:"pie",
            //         label:{
            //             show:true,
            //         },
            //         center:['50%','60%']  //饼图的中心（圆心）坐标，[横坐标，纵坐标]。
            //     }
            // ]

        }

        // 1.3绘制基础图表
        this.echartsInstance.setOption(initOptions)

    },

    // 2.获取业务数据
    async getData(){
        let {data} = await this.$http.get('cropAreasProportion')
        // console.log(data);
        this.allData = data;
        //调用根据业务继续完善图表
        this.setEcharts();
        // 4.调用适配方法
        this.adapTive();
    },

    //3.根据业务继续完善图表
    setEcharts(){
        // 1.根据业务数据生成图表系列 [{type:pie},{type:pie},{},{}....]
        // 获取数据的长度
        let count = this.allData.length;
        // console.log(count);
        let series = this.allData.map((item,index)=>{
            return {
                type:"pie",
                redius:[100,120],  //饼图的半径。
                center:[100/(count+1)*(index+1)+'%','50%'],  //饼图的中心（圆心）坐标，[横坐标，纵坐标]。
                data:[{name:item.areas+'\n'+item.zb+'%',value:item.zb},{value:item.other}],  //数据展示
                label:{
                    position:'center'
                }
            }
        })
        // console.log(cateData);

        // 2.设置绘图配置项
        let setOptions={
            series:series
        }
        // 3.setOption 合并多次的绘图配置项 完善图表
        this.echartsInstance.setOption(setOptions)

    },

    // 4.窗口适配方法
    adapTive(){
        // console.log('适配位置：',this.allData);
        // 通过比例尺的思想解决坐标系外的适配问题
        let width = this.$refs.ring.offsetWidth; 
        // 3.5-3.7
        let scale = width / 100 * 3.6

        let series = this.allData.map(item=>{
            return {
                radius:[scale*1.3,scale*1.5],
                label:{
                    fontSize:scale*0.4
                }
            }
        })
        // 设置动态需要适配的配置项
        let adapOptions = {
            // 标题
            title:{
                textStyle:{
                    fontSize:scale
                }
            },
            // 图表系列重置半径大小
            series:series
        }
        // 适配绘图
        this.echartsInstance.setOption(adapOptions)

        
        // 处理坐标系内的图图表适配
        this.echartsInstance.resize()
    }
  },
};
</script>

<style scoped>
</style>